$baseWidth: 215px;

@mixin sub-menu-theme($popperWidth) {
    $subMenuHeight: 42px; // 子菜单高度

    .el-menu--vertical,
    .el-menu--horizontal {

        .el-menu-item,
        .el-sub-menu__title {
            height: $subMenuHeight;

            div,
            span {
                height: $subMenuHeight;
                line-height: $subMenuHeight;
            }
        }
    }

    /* 子菜单弹窗 */
    .sub-menu-theme {
        .el-menu--popup {
            background-color: var(--enco-theme-sub-menu-bg) !important;

            /* 不是一级菜单删除下划线 */
            a>.is-active.submenu-title-noDropdown {
                border-bottom: none;
            }

            .el-menu-item {
                color: var(--enco-theme-menu-text);
                background-color: var(--enco-theme-sub-menu-bg);

                span {
                    font-size: 14px;
                }
            }

            .el-sub-menu__title {
                color: var(--enco-theme-menu-text);
            }
        }

        /* 子菜单中还有子菜单 */
        .el-menu .el-sub-menu__title {
            min-width: $popperWidth !important;
            font-size: 14px;
            background-color: var(--enco-theme-sub-menu-bg) !important;

            &:hover {
                color: var(--enco-theme-menu-title-hover) !important;
            }
        }

        .is-active>.el-sub-menu__title,
        .is-active.submenu-title-noDropdown {
            color: var(--enco-theme-sub-menu-active-text) !important;

            i {
                color: var(--enco-theme-sub-menu-active-text) !important;
            }
        }

        .el-menu-item,
        .el-sub-menu__title {
            color: var(--enco-theme-menu-text);
            background-color: transparent !important;

            &:hover {
                color: var(--enco-theme-menu-title-hover) !important;
            }
        }

        .el-menu-item.is-active {
            color: var(--enco-theme-sub-menu-active-text) !important;
            transition: color 0.3s;
        }

        .el-menu-item.is-active.nest-menu>* {
            z-index: 1;
            color: #fff !important;
        }

        .el-menu-item.is-active.nest-menu::before {
            position: absolute;
            inset: 0 5px;
            clear: both;
            content: "";
            background: var(--el-color-primary) !important;
            border-radius: 3px;
        }
    }
}

/* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
@mixin merge-style($sideBarWidth) {
    @include sub-menu-theme($sideBarWidth);

    .el-popper.ep-scrollbar {
        overflow: hidden;
    }

    .sub-menu-icon {
        margin-right: 5px;
        font-size: 18px;

        svg {
            width: 18px;
            height: 18px;
        }
    }

    .set-icon,
    .fullscreen-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 48px;
        cursor: pointer;
    }

    .main-container {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100vh;
        min-height: 100vh;
        margin-left: $sideBarWidth;
        background: #f0f2f5;

        /* main-content 属性动画 */
        transition: margin-left var(--enco-transition-duration);

        .el-scrollbar__wrap {
            height: 100%;
            overflow: auto;
        }
    }

    .sidebar-container {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        width: $sideBarWidth !important;
        height: 100%;
        overflow: visible;
        font-size: 0;
        background: var(--enco-theme-menu-bg) !important;
        border-right: 1px solid var(--enco-border-color);

        /* 展开动画 */
        transition: width var(--enco-transition-duration);

        .scrollbar-wrapper {
            overflow-x: hidden !important;
        }

        .el-scrollbar__bar.is-vertical {
            right: 0;
        }

        &.has-logo {
            .el-scrollbar.desktop {
                /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
                height: calc(100% - (var(--enco-page-head-height) + 44px));
            }

            /* logo: 48px */
            .el-scrollbar.mobile {
                height: calc(100% - var(--enco-page-head-height));
            }
        }

        &.no-logo {
            .el-scrollbar.desktop {
                /* leftCollapse: 40px、leftCollapse-shadow: 4px */
                height: calc(100% - 44px);
            }

            .el-scrollbar.mobile {
                height: 100%;
            }
        }

        // 隐藏横向菜单滚动条
        .is-horizontal {
            display: none;
        }

        a {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }

        .el-menu {
            height: 100%;
            background-color: transparent !important;
            border: none;
        }

        .el-menu-item,
        .el-sub-menu__title {
            height: 50px;
            color: var(--enco-theme-menu-text);
            background-color: transparent !important;

            &:hover {
                color: var(--enco-theme-menu-title-hover) !important;
            }

            div,
            span {
                height: 50px;
                line-height: 50px;
            }
        }

        .submenu-title-noDropdown,
        .el-sub-menu__title {
            &:hover {
                background-color: transparent;
            }
        }

        .is-active>.el-sub-menu__title,
        .is-active.submenu-title-noDropdown {
            color: var(--enco-theme-sub-menu-active-text) !important;

            i {
                color: var(--enco-theme-sub-menu-active-text) !important;
            }
        }

        .is-active {
            color: var(--enco-theme-sub-menu-active-text) !important;
            transition: color 0.3s;
        }

        .el-menu-item.is-active.nest-menu>* {
            z-index: 1;
            color: #fff !important;
        }

        .el-menu-item.is-active.nest-menu::before {
            position: absolute;
            inset: 0 8px;
            clear: both;
            margin: 4px 0;
            content: "";
            background: var(--el-color-primary) !important;
            border-radius: 3px;
        }

        .el-menu .el-menu--inline .el-sub-menu__title,
        & .el-sub-menu .el-menu-item {
            min-width: $sideBarWidth !important;
            font-size: 14px;
            background-color: var(--enco-theme-sub-menu-bg) !important;
        }

        /* 有子集的激活菜单左侧小竖条 */
        .is-active.outer-most.el-sub-menu>.el-sub-menu__title::before,
        .el-menu--collapse .is-active.outer-most.el-sub-menu>.el-sub-menu__title::before {
            position: absolute;
            top: 0;
            left: 0;
            clear: both;
            width: 4px;
            height: 100%;
            content: "";
            background-color: var(--enco-theme-menu-active-before);
            transform: translateY(0);
            transition: all var(--enco-transition-duration) ease-in-out;
        }

        .outer-most.el-sub-menu>.el-sub-menu__title::before,
        .el-menu--collapse .outer-most.el-sub-menu>.el-sub-menu__title::before {
            position: absolute;
            top: 50%;
            display: block;
            width: 3px;
            height: 0;
            content: "";
            transform: translateY(-50%);
        }

        /* 无子集的激活菜单背景 */
        .is-active.submenu-title-noDropdown.outer-most>* {
            z-index: 1;
            color: #fff !important;
        }

        .is-active.submenu-title-noDropdown.outer-most::before {
            position: absolute;
            inset: 0 8px;
            clear: both;
            margin: 4px 0;
            content: "";
            background: var(--el-color-primary) !important;
            border-radius: 3px;
        }
    }

    /* vertical 菜单折叠 */
    .el-menu--vertical {
        &>.el-menu {

            i,
            svg {
                margin-right: 5px;
            }
        }

        .el-menu-item,
        .el-sub-menu {
            .iconfont {
                font-size: 18px;
            }

            .el-menu-tooltip__trigger {
                justify-content: center;
                width: var(--enco-sidebar-collapsed-width);
                padding: 0;
            }
        }
    }

    .el-menu--collapse .el-menu .el-sub-menu {
        min-width: $sideBarWidth !important;
    }

    /* 手机端 */
    .mobile {
        .main-container {
            margin-left: 0 !important;
        }

        .sidebar-container {
            z-index: 2001;
            width: $sideBarWidth;
            transition: transform var(--enco-transition-duration);
        }

        &.hide-sidebar {
            .sidebar-container {
                pointer-events: none;
                transform: translate3d(-$sideBarWidth, 0, 0);
                transition-duration: 0.3s;
            }
        }
    }
}

/**
 * 设置水平菜单样式
 * @param popperWidth - 弹出菜单的最小宽度
 */
@mixin horizontal-nav($popperWidth) {
    .header-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--enco-theme-menu-bg);

        .header-right {
            color: var(--enco-theme-text);

            .dark-bg-hover:hover {
                background: var(--enco-theme-menu-hover);
            }
        }

        .el-menu {
            width: 100%;
            min-width: 0;
            height: 100%;
            background-color: transparent;
            border: none;
        }

        .el-menu-item,
        .el-sub-menu__title {
            padding-right: var(--el-menu-base-level-padding);
            color: var(--enco-theme-menu-text);

            &:hover {
                color: var(--enco-theme-menu-title-hover) !important;
            }

            &:focus {
                color: var(--enco-theme-menu-text) !important;
            }
        }

        .submenu-title-noDropdown,
        .el-sub-menu__title {
            height: 48px;
            line-height: 48px;

            &:hover {
                background: var(--enco-theme-menu-bg) !important;
            }

            // 去除水平菜单点击后的背景
            &:focus {
                background: none !important;
            }

            svg {
                position: static !important;
            }
        }

        .is-active>.el-sub-menu__title,
        .is-active.submenu-title-noDropdown {
            color: var(--enco-theme-sub-menu-active-text) !important;

            i {
                color: var(--enco-theme-sub-menu-active-text) !important;
            }
        }

        .is-active {
            color: var(--enco-theme-sub-menu-active-text) !important;
            transition: color 0.3s;
        }

        /* horizontal 菜单 */
        .el-menu--horizontal {
            &>.el-sub-menu .el-sub-menu__icon-arrow {
                position: static !important;
                margin-top: 0;
            }

            /* 一级菜单无子菜单时激活时显示下划线，先置为透明，避免抖动 */
            a>.submenu-title-noDropdown {
                border-bottom: 2px solid transparent;
            }

            /* 一级菜单无子菜单时激活时显示下划线颜色 */
            a>.is-active.submenu-title-noDropdown {
                border-bottom-color: var(--el-menu-active-color);
            }
        }
    }
}

body[layout="vertical"] {
    @include merge-style($baseWidth);

    .el-menu--collapse {
        width: var(--enco-sidebar-collapsed-width);
    }

    .sidebar-logo-container {
        background: var(--enco-theme-sidebar-logo);
    }

    .hide-sidebar {
        .sidebar-container {
            width: var(--enco-sidebar-collapsed-width) !important;
            transition: width var(--enco-transition-duration);

            .is-active.submenu-title-noDropdown.outer-most {
                background: transparent !important;
            }
        }

        .main-container {
            margin-left: var(--enco-sidebar-collapsed-width);
        }

        /* 菜单折叠 */
        .el-menu--collapse {
            .el-sub-menu {
                &>.el-sub-menu__title {
                    &>span {
                        display: none;
                    }
                }
            }

            .submenu-title-noDropdown {
                background: transparent !important;
            }

            .el-sub-menu__title {
                padding: 0;
            }
        }

        .sub-menu-icon {
            margin-right: 0;
        }
    }

    /* 搜索 */
    .search-container,
    /* 国际化 */
    .globalization,
    /* 全屏 */
    .fullscreen-icon,
    /* 消息通知 */
    .dropdown-badge,
    /* 用户名 */
    .el-dropdown-link,
    /* 设置 */
    .set-icon {
        &:hover {
            background: #f6f6f6;
        }
    }
}

body[layout="horizontal"] {
    $sideBarWidth: 0;

    @include merge-style($sideBarWidth);
    @include horizontal-nav($sideBarWidth);

    .main-container {
        transition: none !important;
    }
}

body[layout="mix"] {
    @include merge-style($baseWidth);
    @include horizontal-nav(0);

    .el-menu--collapse {
        width: var(--enco-sidebar-collapsed-width);
    }

    .el-menu {
        --el-menu-hover-bg-color: transparent !important;
    }

    .hide-sidebar {
        .sidebar-container {
            width: var(--enco-sidebar-collapsed-width) !important;
            transition: width var(--enco-transition-duration);

            .is-active.submenu-title-noDropdown.outer-most {
                background: transparent !important;
            }
        }

        .main-container {
            margin-left: var(--enco-sidebar-collapsed-width);
        }

        /* 菜单折叠 */
        .el-menu--collapse {
            .el-sub-menu {
                &>.el-sub-menu__title {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0;

                    &>span {
                        visibility: visible;
                        flex-grow: 0;
                        flex-basis: 28px; // 设置字体展示时宽度为28px
                        width: 28px;
                        height: 100%;
                        text-align: center;
                    }
                }
            }
        }
    }
}